<template>
	<view class="content">
		
		<uni-search-bar readonly placeholder="请输入商品名" @confirm="search" />
		<!-- <image class="logo" src="/static/logo.png"></image> -->

		<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
			duration="500" indicator-color="#cccccc" indicator-active-color="#676767">
			<swiper-item v-for="(item,index) in swiperData1" :key="index" class="margin-top-sm">
				<image class="swiper-image" :src="item.url"></image>
				<!-- <view>{{item.url}}</view> -->
			</swiper-item>
		</swiper>
		<!-- <image class="" :src="swiperData[0]"></image> -->

		<view class="cu-list grid no-border justify-around">
			<navigator class="cu-item" hover-class="none" url='/pages/goods/goods-detail/index?id=1442505794278191105'>
				<image class="nav-image" src="/static/img/6-1.png"></image>
				<text class="text-black">iPhone</text>
			</navigator>
			<navigator class="cu-item" hover-class="none" url='/pages/goods/goods-detail/index?id=1442512382615416833'>
				<image class="nav-image" src="/static/img/6-2.png"></image>
				<text class="text-black">iPad</text>
			</navigator>
			<navigator class="cu-item" hover-class="none" url='/pages/goods/goods-detail/index?id=1442512958581436418'>
				<image class="nav-image" src="/static/img/6-3.png"></image>
				<text class="text-black">Mac</text>
			</navigator>
			<navigator class="cu-item" hover-class="none" url='/pages/goods/goods-detail/index?id=1442513594978988034'>
				<image class="nav-image" src="/static/img/6-4.png"></image>
				<text class="text-black">Watch</text>
			</navigator>
			<navigator class="cu-item" hover-class="none" url='/pages/goods/goods-detail/index?id=1442514202062548994'>
				<image class="nav-image" src="/static/img/6-5.png"></image>
				<text class="text-black">AirPods</text>
			</navigator>
		</view>

		<!-- 公告 -->
		<view class="adsec light bg-white margin-top-sm">
			<swiper class="swiper_container" autoplay="true" circular="true" interval="6000">
				<swiper-item>
					<view class="bg-white padding-left-sm text-black">
						<text class="cu-tag line-black text-bold">公告</text>
						<text class="details margin-left">再见2020，你好2021！</text>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="bg-white padding-left-sm text-black">
						<text class="cu-tag line-black text-bold">注意</text>
						<text class="details margin-left">演示商城，不发货不退款</text>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<navigator hover-class="none" url='/pages/goods/goods-detail/index?id=1442505794278191105'>
			<image class="margin-top-sm goods-image"
				src="https://joolun-base-test.oss-cn-zhangjiakou.aliyuncs.com/1/material/055f3304-13d1-43c8-8547-326cc3efc7fc.jpg">
			</image>
			<view class="flex justify-between margin-top-sm align-center padding-lr">
				<view class="text-black">RMB 7999 起</view>
				<view class="cu-btn round bg-gray text-white buy-now">购买</view>
			</view>
		</navigator>

		<view class='wrapper bg-white margin-top-xl'>
			<view class="cu-bar text-black">
				<view class='action margin-left-sm'>
					<text class="text-xxl text-bold">热销单品</text>
				</view>
				<navigator hover-class="none" url='/pages/goods/goods-list/index?type=2' class='action'>
					更多<text class='cuIcon-right'></text>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import api from '@/utils/api'
	export default {
		data() {
			return {
				page: {
					searchCount: false,
					current: 1,
					size: 10
				},
				loadmore: true,
				goodsList: [],
				goodsListNew: [],
				goodsListHot: [],
				swiperData: [
					'https://joolun-base-test.oss-cn-zhangjiakou.aliyuncs.com/1/material/c888e1d3-f542-4b4e-aa43-be9d50cc0696.jpg',
					'https://joolun-base-test.oss-cn-zhangjiakou.aliyuncs.com/1/material/a5e3b9f4-f1fe-4bb2-b487-13f4395ef187.jpg',
					'https://joolun-base-test.oss-cn-zhangjiakou.aliyuncs.com/1/material/c8fd87ff-ca5d-4f95-8f81-e99cae48b0f7.jpg',
					'https://joolun-base-test.oss-cn-zhangjiakou.aliyuncs.com/1/material/bf176bd5-3487-4b61-8d30-1cc2ad95b8ac.jpg'
				],
				swiperData1: [ {
					id: '1',
					url: 'https://joolun-base-test.oss-cn-zhangjiakou.aliyuncs.com/1/material/c888e1d3-f542-4b4e-aa43-be9d50cc0696.jpg'
				},{
					id: '1',
					url: '/static/images/goods1.png'
				}, {
					id: '1',
					url: 'https://joolun-base-test.oss-cn-zhangjiakou.aliyuncs.com/1/material/c8fd87ff-ca5d-4f95-8f81-e99cae48b0f7.jpg'
				}],
				cardCur: 0,
				noticeData: [],
				title: 'aa',
			}
		},
		onLoad() {
			app.initPage()
				.then(res => {
					this.loadData()
				})
		},
		onShow() {
			//更新tabbar购物车数量
			wx.setTabBarBadge({
				index: 2,
				text: app.globalData.shoppingCartCount + ''
			})
		},
		onPullDownRefresh() {
			// 显示顶部刷新图标
			wx.showNavigationBarLoading()
			this.refresh()
			// 隐藏导航栏加载框
			wx.hideNavigationBarLoading()
			// 停止下拉动作
			wx.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.loadmore) {
				this.setData({
					['page.current']: this.page.current + 1
				})
				this.goodsPage()
			}
		},
		onShareAppMessage: function() {
			let title = 'JooLun商城源码-小程序演示'
			let path = 'pages/home/index'
			return {
				title: title,
				path: path,
				success: function(res) {
					if (res.errMsg == 'shareAppMessage:ok') {
						console.log(res.errMsg)
					}
				},
				fail: function(res) {
					// 转发失败
				}
			}
		},
		methods: {
			loadData() {
				this.goodsNew()
				this.goodsHot()
				this.goodsPage()
			},
			//新品首发
			goodsNew() {
				api.goodsPage({
						searchCount: false,
						current: 1,
						size: 5,
						descs: 'create_time'
					})
					.then(res => {
						let goodsListNew = res.data.records
						this.goodsListNew = goodsListNew

					})
			},
			//热销单品
			goodsHot() {
				api.goodsPage({
						searchCount: false,
						current: 1,
						size: 5,
						descs: 'sale_num'
					})
					.then(res => {
						let goodsListHot = res.data.records
						this.goodsListHot = goodsListHot

					})
			},
			goodsPage(e) {
				api.goodsPage(this.page)
					.then(res => {
						let goodsList = res.data.records

						this.goodsList = [...this.goodsList, ...goodsList]
						if (goodsList.length < this.page.size) {
							this.loadmore = false
						}
					})
			},
			refresh() {
				this.setData({
					loadmore: true,
					['page.current']: 1,
					goodsList: [],
					goodsListNew: [],
					goodsListHot: []
				})
				this.loadData()
			},
			jumpPage(e) {
				let page = e.currentTarget.dataset.page
				if (page) {
					wx.navigateTo({
						url: page
					})
				}
			}
		},

	}
</script>

<style lang="scss" scoped>
	.wrapper-list {
		white-space: nowrap;
		padding: 0rpx 0rpx 50rpx 0rpx;
	}

	.wrapper-list .item {
		display: inline-block;
		width: 560rpx;
		height: 800rpx;
		margin: 60rpx 0 60rpx 50rpx;
		padding: 10rpx 30rpx;
		border-radius: 25rpx;
		box-shadow: 0rpx 0rpx 60rpx rgba(211, 211, 211, 1);
	}

	.wrapper-list .item:nth-last-child(1) {
		margin-right: 20rpx;
	}

	.wrapper-list .item .img-box {
		width: 100%;
		height: 480rpx;
	}

	.wrapper-list .item .img-box image {
		width: 100%;
		height: 100%;
	}

	.adsec {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		padding: 7rpx 10rpx;
		height: 80rpx;
	}

	.adsec-icon {
		height: 80rpx;
		line-height: 40rpx;
	}

	.search-form {
		border-radius: 20rpx;
	}

	.swiper_container {
		height: 80rpx;
		width: 95%;
		line-height: 80rpx;
		line-height: 40rpx;
	}

	.screen-swiper {
		height: 480rpx;
	}

	.swiper-image {
		width: 96% !important;
		height: 350rpx !important;
		margin: 40rpx auto !important;
		border-radius: 20rpx;
		box-shadow: 0rpx 10rpx 60rpx rgba(211, 211, 211, 1);
	}

	.nav-image {
		width: 100rpx;
		height: 100rpx
	}

	.text-black {
		color: #000 !important;
	}

	.goods-image {
		width: 100%;
		height: 1150rpx;
	}

	.hot-goods {
		width: auto;
		overflow: hidden;
	}

	.buy-now {
		color: #2967ff;
		width: 160rpx;
	}
</style>